<template>
  <div>age1: {{ age1 }}</div>
  <div>age2: {{ age2 }}</div>
  <div>
    <button @click="update1">update1</button>
    <button @click="update2">update2</button>
  </div>
</template>

<script setup>
import { toRef, ref } from 'vue'
const user = {
  name: 'zheng',
  age: 18
}
const age1 = toRef(user, 'age')
const age2 = ref(user.age)
console.log(age2)
const update1 = () => {
  // 视图不会发生变化，原始数据发生变化
  age1.value++
  console.log(user)
}
const update2 = () => {
  // 视图发生变化，原始数据未发生变化
  age2.value++
  console.log(user)
}
</script>

<style scoped>
</style>